<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 在H5当中新增了几个语义化的标签 目的就是为了让整体更加具有可读性 -->
    <!-- 头部标签 -->
    <header>
        <h1>这是头部</h1>
    </header>

    <!-- 导航栏 -->
    <nav>
        <ul>
            <li><a href="#">导航栏1</a></li>
            <li><a href="#">导航栏2</a></li>
            <li><a href="#">导航栏3</a></li>
            <li><a href="#">导航栏4</a></li>
            <li><a href="#">导航栏5</a></li>
        </ul>
    </nav>
    

    <div class="page-content">
        <!-- 主要内容区域 -->
         <aside style="float: right;">
            <li><a href="#">导航栏1</a></li>
            <li><a href="#">导航栏1</a></li>
            <li><a href="#">导航栏1</a></li>
            <li><a href="#">导航栏1</a></li>
            <li><a href="#">导航栏1</a></li>
         </aside>

         <!-- article内部可以有多个的section 两者是这样的包含关系  -->
         <article>
            <section>
                <h2>标题一</h2>
                <p>这是文章的开头</p>
                <h3>文章内容</h3>
            </section>
            
            <section>
                <h2>标题一</h2>
                <p>这是文章的开头</p>
                <h3>文章内容</h3>
            </section>
            
            <section>
                <h2>标题一</h2>
                <p>这是文章的开头</p>
                <h3>文章内容</h3>
            </section>
         </article>
    </div>
</body>
</html>